<template>
  <d2-container>
    <div class="d2-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的账户</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>我的资金</h2>
    <el-row :gutter="20" class="num-block">
      <el-col :span="8">
        <div class="grid-content">
          <p>全部资金</p>
          <h4>{{ finance.allAmount || "-" }}</h4>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <p>可用资金</p>
          <h4>{{ finance.useAmount || "-" }}</h4>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <p>冻结资金</p>
          <h4>{{ finance.freezeAmount || "-" }}</h4>
        </div>
      </el-col>
    </el-row>

    <el-form :inline="true" class="SearchForm">
      <el-form-item label="佣金单号">
        <el-input
          placeholder="请输入"
          type="text"
          v-model.trim="searchForm.withdrawalNumber"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="提现方式">
        <el-select
          v-model="searchForm.withdrawalWay"
          placeholder="请选择"
          style="width: 207px"
        >
          <el-option label="支付宝" :value="0"></el-option>
          <el-option label="微信" :value="1"></el-option>
          <el-option label="银行卡" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="search()" icon="el-icon-search"
        >查询</el-button
      >
      <el-button type="danger" icon="el-icon-refresh" @click="reset"
        >重置</el-button
      >
      <el-form-item>
        <el-button
          type="success"
          @click="dialogVisible = true"
          style="margin-left: 10px"
          >发起提现</el-button
        >
      </el-form-item>
    </el-form>

    <el-table border :data="tableData.list">
      <el-table-column label="Id" align="center" prop="id"></el-table-column>
      <el-table-column
        label="提现订单号"
        align="center"
        prop="withdrawalNumber"
      ></el-table-column>
      <el-table-column
        label="关联业务单号"
        align="center"
        prop="businessNumber"
      ></el-table-column>
      <el-table-column
        label="金额"
        align="center"
        prop="price"
      ></el-table-column>
      <el-table-column label="提现方式" align="center" prop="withdrawalWay">
        <template slot-scope="scope">
          {{ ["支付宝", "微信", "银行卡"][scope.row.withdrawalWay] }}
        </template>
      </el-table-column>
      <el-table-column label="提现参数" prop="price">
        <template slot-scope="scope">
          账户名称： {{ scope.row.accountName }}
          <br />
          账户类型： {{ ["支付宝", "微信", "银行卡"][scope.row.withdrawalWay] }}
          <br />
          账户： {{ scope.row.account }}
        </template>
      </el-table-column>
      <el-table-column
        label="提现时间"
        align="center"
        prop="createTime"
      ></el-table-column>

      <el-table-column label="类型" align="center" prop="type">
        <template slot-scope="scope">
          {{ ["进帐", "提现"][scope.row.type] }}
        </template>
      </el-table-column>

      <el-table-column label="提现状态" align="center" prop="isConfirm">
        <template slot-scope="scope">
          {{ ["用户发起提现", "已批准提现"][scope.row.isConfirm] }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="search"
      @current-change="search"
      :current-page.sync="page"
      :page-sizes="[10, 25, 50, 100]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
    ></el-pagination>

    <!-- 新增提现 -->
    <el-dialog
      title="发起提现"
      :visible.sync="dialogVisible"
      width="400px"
      class="dialog-box"
    >
      <el-form label-width="100px" :model="query" ref="add">
        <el-form-item label="类型" prop="title">
          <el-select v-model="query.type" style="width: 80%">
            <el-option label="进账" :value="0"></el-option>
            <el-option label="提现" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="提现方式"
          prop="withdrawalWay"
        >
          <el-select
            v-model="query.withdrawalWay"
            placeholder="请选择"
            style="width: 207px"
          >
            <el-option label="支付宝" :value="0"></el-option>
            <el-option label="微信" :value="1"></el-option>
            <el-option label="银行卡" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="提现金额"
          prop="price"
          :rules="[
            { required: true, message: '字段不能为空' },
            { type: 'number', message: '字段必须为数字值' },
          ]"
        >
          <el-input
            placeholder="请输入"
            type="text"
            v-model.number="query.price"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="userName"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input
            placeholder="请输入"
            type="text"
            v-model.number="query.userName"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="账户名称"
          prop="accountName"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input
            placeholder="请输入"
            type="text"
            v-model.number="query.accountName"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="提现账户"
          prop="account"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input
            placeholder="请输入"
            type="text"
            v-model.number="query.account"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="content"
          :rules="[{ required: true, message: '字段不能为空' }]"
        >
          <el-input
            placeholder="请输入"
            type="text"
            v-model.number="query.content"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      searchForm: {},
      finance: {},
      query: {},
      rules: [],
      tableData: {
        list: [],
        total: 0,
      },
      page: 1,
      pageSize: 10,
      dialogVisible: false,
    };
  },
  methods: {
    search() {
      let params = {
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.searchForm,
      };

      this.$axios.post("/wxAmountRecord/list", params).then((result) => {
        if (result) {
          this.tableData = {
            list: result.data.list,
            total: result.data.total,
          };
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    reset() {
      this.searchForm = {};
      this.search();
    },
    getInfo() {
      let userId = localStorage.getItem("userId");
      //  TODO franchiseId
      this.$axios.post("/sysFinance/getInfo", { userId }).then((result) => {
        console.log("响应", result);
        if (result) {
          this.finance = result.data || {};
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    submit() {
      let userId = localStorage.getItem("userId");
      //  TODO franchiseId
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
            // id: userId,
          };
          console.log("提交内容：", params);

          this.$axios.post("/wxAmountRecord/add", params).then((result) => {
            console.log("响应", result);
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$refs["add"].resetFields();
              this.dialogVisible = false;
               this.search();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.search();
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.num-block {
  text-align: center;
  background: #f3f3f3;
  border-radius: 2px;
  margin-bottom: 25px;
  color: #666;
  .el-col {
    font-size: 20px;
    .grid-content {
      border-left: 1px dashed #c1c1c1;
      position: relative;
      .position-box {
        position: absolute;
        right: 30px;
      }
    }
    &:nth-of-type(1) {
      color: #409eff;
      .grid-content {
        border-left: 0;
      }
    }
    &:nth-of-type(2) {
      color: #67c23a;
    }
    &:nth-of-type(3) {
      color: #909399;
    }
    &:nth-of-type(4) {
      color: #f56c6c;
    }
  }
}
</style>
